반응형 Site 만들기15 유형종합 반응형 사이트만들기 사이트 만들기 : 반응형 적용01 사이트 만들기 : 반응형 적용입니다. 블로그에 있는 모든 사이트 유형을 종합하여 반응형 사이트로 만들어 봤습니다. html코드와 css코드는 스크롤 압박으로 생략하였으니, 원본 소스 보기(github) 자료를 참고해주세요! JAVASCRIPT 슬라이드 영역 사진 이동(버튼) / 애니메이션 설정 var swiper = new Swiper(".mySwiper", { navigation: { nextEl: ".swiper-button-next", // 다음 이미지 버튼 prevEl: ".swiper-button-prev", // 이전 이미지 버튼 }, autoplay: { // 이미지 자동 넘어가기 delay: 2000, disableOnInteraction: false, /.. 2022. 9. 14. footer 유형01 사이트 만들기 : 푸터 유형01 사이트 만들기 - 푸터 유형입니다. 이미지 없이 링크 텍스트로 이루어져있습니다. HTML HTML 영역입니다. 길어서 어려워보이지만, 링크 텍스트만 많고 간단한 구조입니다. 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 컨텐츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 컨택트 유형01 푸터 이메일 유형01 2022 Webstoryboy. Portfolio is Power All rights reserved.. 2022. 9. 5. banner 유형01 사이트 만들기 : 배너 유형01 사이트 만들기 - 배너 유형입니다. 슬라이드 영역과 비슷하게 이미지 영역이 크니 사진 선정이 중요합니다. HTML HTML 영역입니다. 제목을 blind 처리해주고, 본문 영역을 설정합니다. 배너 영역 저기압 월요일 태풍이 오는 9월 첫 째주 월요일 기분이 너무 저기압이네요... https://sukjun2.tistory.com/ 배너 유형01 CSS CSS 속성은 간단합니다. background를 통한 이미지 삽입과 반복x, 위치는 중앙, 이미지 크기는 테두리에 맞춰 설정되게합니다. /* bannerType */ .banner__inner { background-image: url(img/banner_bg01.jpg); background-repeat: no-repeat.. 2022. 9. 5. slider 유형01 사이트 만들기 : 슬라이드 유형01 사이트 만들기 - 슬라이드 유형입니다. 헤더 이후로 바로 보이는 페이지로 글씨가 잘 보이도록 이미지 선정이 중요합니다. HTML HTML 영역입니다. 제목을 blind 처리해주고, 슬라이드 영역 내부에 이미지, 본문, 버튼 등이 모두 들어있도록 구성해줍니다. 이전, 다음으로 넘어가거나 재생, 일시정지 아이콘들에는 웹표준 준수를 위하여 ir 클래스를 사용해줍니다. 슬라이드 영역 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 CSS CSS 속성은 ir이나 blind 같은 공통부분을 제외한 sliderType만 가져왔습니다. bac.. 2022. 9. 5. imgText 유형01 사이트 만들기 : 이미지/텍스트 유형01 사이트 만들기 - 이미지/텍스트 유형입니다. HTML 좌측의 텍스트 영역과 우측의 이미지 영역으로 구성되었습니다. 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 CSS word-break: keep-all;을 사용하여 단어 단위로 줄바꿈이 생기도록 하였습니다. 이미지는 css의 bg url기능을 사용하여 삽입하여주었습니다. (no-repeat : 이미지를 반복되지 않도록 합니다. / cover : 이미지를 요소에 맞추어 줍니다.) /* i.. 2022. 9. 1. header 유형01 사이트 만들기 : 헤더 유형01 사이트 만들기 - 헤더 유형입니다. 다른 유형보다 훨씬 간단하니 만들어보세요! HTML HTML 영역입니다. 굉장히 간단하죠? web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 CSS web site 단어에 각각 다른 글자 속성을 지정하기 위해 site에 em태그를 사용하여 감싸주었습니다. 각 영역으로 연결시켜주기 위해 a태그를 사용하였고, 로그인 버튼도 만들었습니다.(아직 기능은 없어요!) /* headerType */ .header__inner { width: 100%; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 2.. 2022. 9. 1. 텍스트 유형03 사이트 만들기 : 텍스트 유형3 텍스트 유형3 입니다. 카드 유형3과 비슷한 유형으로 따라 만들어 보세요! HTML text 내부에 text__info 클래스를 가진 div를 생성하여 정보란을 생성하였습니다. 웹 디자인 기능사 필기 후기 웹 디자인 기능사 필기시험을 보고왔어요 혹시 했는데 역시나 어렵네요 웹 디자인 기능사 필기시험을 보고왔어요 혹시 했는데 역시나 어렵네요. 숙제도 해야하고 시험공부도 해야하고 정말 바쁜 일정이였어요. 조금 더 속도를 내서 숙제를 하고싶은데 제 손가락이 따라주질 않네요. 모두 합격하셨기를 바라면서 글을 여기까지 써보겠습니다... 코터틀 웹스 29기 자세히 보기 웹 디자인 기능사 필기시험을 보고왔어요 혹시 했는데 역시나 어렵네요. 숙제도 해야하고 시험공부도 해야하고 정말 바쁜.. 2022. 8. 30. 텍스트 유형02 사이트 만들기 : 텍스트 유형2 텍스트 유형2 입니다. HTML 좌측의 header 영역을 두고 우측에 text 영역이 들어가도록 구분하였습니다. Web design 자습이 왜 필요한지 웹디자인 기능사 필기에 합격하기 위하여 문제를 풀어보기 위한 시간이 필요하지 않을까요?! 자습 유형01 내일은 웹디자인기능사 시험을 보는 날 입니다. 같은 반 학우가 시험에 합격했다고 하니, 우리 모두 합격을 위해 기능사 CBT를 자습 유형02 내일은 웹디자인기능사 시험을 보는 날 입니다. 같은 반 학우가 시험에 합격했다고 하니, 우리 모두 합격을 위해 기능사 CBT를 자습 유형03 내일은 웹디자인기능사 시험을 보는 날 입니다. 같은 반 학우가 시험에 합격했다고 하니, 우리 모두 합격을 위해 기능사 CBT를 자습 유형04.. 2022. 8. 30. 텍스트 유형01 사이트 만들기 : 텍스트 유형1 사이트 만들기 세번째 텍스트 유형입니다, 카드 유형과 만드는 방법은 유사하며 칸마다 마우스 오버 효과를 주었습니다. HTML HTML은 카드유형과 유사합니다. container내부에 6개의 text영역을 만들어줍니다. 텍스트 유형01 자습이 절실한 하루 자습 원해요 내일은 웹디자인기능사 시험을 보는 날 입니다. 같은 반 학우가 시험에 합격했다고 하니, 우리 모두 합격을 위해 기능사 CBT를 더보기 자습 투해요 내일은 웹디자인기능사 시험을 보는 날 입니다. 같은 반 학우가 시험에 합격했다고 하니, 우리 모두 합격을 위해 기능사 CBT를 더보기 자습 쓰리해요 내일은 웹디자인기능사 시험을 보는 날 입니다. 같은 반 학우가 시험에 합격했다고 하니, 우리 모두 합격을 위해 기능사 .. 2022. 8. 30. 이미지 유형03 사이트 만들기 : 이미지 유형3 이번 유형은 hover기능이 들어간 이미지 유형으로, 이미지 하단에서 블러 처리가 된 박스가 올라옴과 동시에 이미지 우측에서 관련 sns로 이동하는 아이콘이 나오도록 제작되었습니다. 이번에는 flex기능이 아닌 grid기능을 사용하여 이미지 위치를 조정하였습니다. HTML 5개의 article로 태그를 구성하였으며, 첫 번째 이미지는 background로 삽입하여 주석처리 해주었습니다. 화려한 색감 색감이 화려한 사진들을 모아봤습니다. 오래보면 눈이 피로해질 수 있으니 주의하세요! Colorful 색감이 화려한 사진들을 모아봤습니다. 오래보면 눈이 피로해질 수 있으니 주의하세요! 페이지이동 페이지이동 페이지이동 페이지이동 페이지이동 Colorful 색감이 화려한 사진들을 .. 2022. 8. 20. 이미지 유형02 사이트 만들기 : 이미지 유형2 3개의 마우스오버 설정이 적용된 이미지 유형입니다. HTML 3개의 article 영역과, 이미지 유형 1번과 다르게 html에 직접적으로 img태그를 넣어 이미지를 삽입하였습니다. 고슴도치 고슴도치의 가시는 주인도 찌를 수 있으니 항상 조심해야해요! 고슴도치 1기 동동일 자세히 보기 고슴도치 2기 동동이 자세히 보기 고슴도치 3기 동동삼 자세히 보기 CSS 이번 이미지 유형은 마우스 오버 효과를 넣어 이미지 위에 마우스를 올려놓으면, 이미지 설명과 자세히 보기 텍스트가 안으로 천천히 나타나도록 설정하였습니다. 이미지 또한, 마우스 오버시 천천히 확대되도록 transform, transition 속성을 사용하여 설정하였습니다. 텍스트 박스에 blur 효과를 주어 좀 더 감.. 2022. 8. 17. 이미지 유형01 사이트 만들기 : 이미지 유형1 카드 유형1번과 비슷한 유형으로, 이번엔 이미지 내부에 텍스트와 버튼이 위치하도록 하였습니다. HTML 2개의 article 영역과 모두를 포함하는 container로 기준을 잡아주었습니다. 온라인 강의 온라인 강의는 상황에 따라 매우 효율적인 방법입니다. 온라인 강의 인터넷을 이용하여 교육자가 진행하는 사이버 원격 수업이다. 온라인 강의 혹은 사이버 강의이라고도 하며, 줄여서 인강, 싸강이라고 한다. 자세히 보기 온라인 강의 인터넷을 이용하여 교육자가 진행하는 사이버 원격 수업이다. 온라인 강의 혹은 사이버 강의이라고도 하며, 줄여서 인강, 싸강이라고 한다. 자세히 보기 CSS 이번 유형은 html에 img태그를 사용하지않고, css에서 background: url을 사.. 2022. 8. 17. 카드 유형03 사이트 만들기 : 카드 유형3 사이트 만들기 카드 유형의 3번째 입니다. 전체적인 사이트의 영역을 구분하고 세부적인 코딩에 들어가는 것이 중요합니다. HTML 카드 영역 전체가 들어갈 section태그에 3개의 아티클로 나누어 기본적인 틀을 잡고 CSS를 설정하며 세부코딩에 들어갑니다. 카드안에 이미지 영역 / 내용이 들어갈 콘텐츠 영역 / 내용에 대한 정보가 들어갈 푸터 영역으로 나누어줍니다. 스키 Ski 스키는 겨울에 즐기는 스포츠이지만, 여름에도 떠오르는 스포츠입니다. 무더운 여름 스키에 대하여 알아보세요. 얇고 긴 활면을 가지는 스키 판 위에 바인딩을 붙이고, 스키 부츠를 결합한 후 눈 위를 활주하는 스포츠. 동계 올림픽의 꽃이며, 메달이... 국가 대표 Choi Heungchul Ski 스키는 .. 2022. 8. 10. 카드 유형02 사이트 만들기 : 카드 유형2 사이트 만들기 카드 유형의 2번째 입니다. Figma를 사용했으며, 공간을 설정하는 방법은 카드 유형 1번과 동일합니다. HTML 8개의 카드 영역으로 나누어져 있으며, container를 사용하여 일괄적으로 전체 영역을 잡아주었습니다. 여름 제철 과일 더운 여름에는 시원한 과일이 생각납니다, 여름에 더욱 맛있어지는 제철 과일에 대하여 알아보겠습니다!🍉 여름 제철 과일 무더운 여름철 제철 과일은 더위를 피하게 해주며, 수분을 공급해주고 달콤한 맛으로 기분도 좋게 해주는 일석이조 더보기 여름 제철 과일 무더운 여름철 제철 과일은 더위를 피하게 해주며, 수분을 공급해주고 달콤한 맛으로 기분도 좋게 해주는 일석이조 더보기 여름 제철 과일 무더운 여름철 제철 과일은 더위를 피하게 .. 2022. 8. 9. 카드 유형01 사이트 만들기 : 카드 유형 Figma를 사용하여 필요한 크기의 프레임을 생성하고, Layout grid로 Columns영역을 잡아 눈금자 기능을 이용하여 px단위로 영역을 나누어줍니다. HTML body 내부의 내용으로, 1개의 태그에 3개의 class를 지정하여 효율적인 CSS작성을 할 수 있고, figure 신규태그 사용과 img태그의 alt를 작성해주어 웹 표준을 준수했습니다. 커피 커피 원두 보관/로스팅 방법, 바리스타, 커피 종류 커피 원두 보관/로스팅 방법 커피를 만드는데 가장 중요한 재료입니다. 원두에 대한 지식과 맛을 알고, 기본적인 원두 보관방법, 로스팅 방법을 익힙니다. 다양한 자료를 통해 커피에 대해서 알아봅니다. 더 자세히 보기 바리스타 커피를 만드는 전문가입니다. 누구나 한번쯤 .. 2022. 8. 8. 이전 1 다음 반응형
